<link rel="stylesheet" href="page/followup/css/dataServiceCenter/export.css" />
<body>
    <div class="wrapper">
        <div class="inside">
            <div class="title">数据导出管理</div>
            <div class="content">
                <!-- step component -->
                <div class="step-wrapper">
                    <div :class="['step-wrapper-item', { 'active': index <= step.index - 1 }]" :style="{ zIndex: 4 - index }" v-for="(item, index) in step.group" :key="index">
                        {{ item }}
                        <span class="step-wrapper-item-port"></span>
                    </div>
                </div>
                <div class="param-wrapper">
                    <!-- 选择导出内容 -->
                    <template v-if="step.index == 1">
                        <div class="_title">包含患者</div>
                        <div class="_row">
                            <span class="_label">请选择要导出患者的队列名称：</span>
                            <el-select size="small" v-model="queue" placeholder="请选择队列名称">
                                <el-option v-for="(item, index) in queueList" :key="index" :value="item.id" :label="item.queueIntro">{{ item.queueIntro }}</el-option>
                            </el-select>
                        </div>
                        <div class="_row" style="margin-bottom: 30px;" v-if="queue">
                            <span class="_label">请选择要导出患者建档时间段：</span>
                            <el-date-picker
                                v-model="date"
                                @change="handleChangeDate"
                                type="daterange"
                                :picker-options="pickerOptions"
                                range-separator="至"
                                size="small"
                                unlink-panels="true"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </div>
                        <!-- <div class="_title">随访节点</div>
                        <div class="_sub_title">请选择要导出的数据节点：</div>
                        <el-checkbox-group v-model="nodes" style="margin-bottom: 20px;">
                            <el-checkbox 
                                v-for="(item, index) in nodeList" 
                                :key="index" :label="item.label"
                                :value="item.value"></el-checkbox>
                        </el-checkbox-group>
                        <div class="_title" style="margin-bottom: 20px;">随访内容</div>
                        <el-checkbox-group v-model="contents" style="margin-bottom: 20px;">
                            <el-checkbox 
                                v-for="(item, index) in contentList" 
                                :key="index" :label="item.label"
                                :value="item.value"></el-checkbox>
                        </el-checkbox-group> -->
                    </template>
                    <!-- 选择导出文件类型 -->
                    <template v-else-if="step.index == 2">
                        <div class="kinds-wrapper">
                            <div :class="['kinds', { 'active': kinds.active == index + 1 }]" 
                                @click="handleSelectKind(index)" 
                                v-for="(item, index) in kinds.list" 
                                :key="index">
                                <i class="el-icon-document file"></i>
                                <p>{{ item.label }}文件</p>
                            </div>
                        </div>
                    </template>
                    <!-- 导出完成 -->
                    <template v-else>                                                                                                                                                                                                                              
                        <div class="export-finish-wrapper">
                            <i class="el-icon-circle-check"></i>
                            <!-- <p>导出完成，请点击 <span @click="handleDownLoad">[下载]</span></p> -->
                            <p>已开始导出操作，请到导出历史页下载导出结果。<span @click="handleDownLoad">点此处转跳导出历史页</span></p>
                        </div>
                    </template>
                    <div class="_btns" v-if="step.index == 1 || step.index == 2">
                        <el-button @click="handlePrev" type="primary" size="small" :disabled="step.index == 1">上一步</el-button>
                        <el-button @click="handleNext" type="primary" size="small" :disabled="step.index == 3" :loading="loading">下一步</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="scprit/followup/app/dataServiceCenter/export.js"></script>
</body>